<template>
	<div>
		<!-- 导航栏 -->
		<!-- this.$router.back()  可以实现返回 -->
		<!-- $router.back() 写成 $router.go(-1) 也可以 -->
		<!-- <van-nav-bar title="个人信息编辑" left-text="返回" left-arrow @click-left="$router.back()" @click-right="indexFn">
			<template #right>
				<van-icon name="wap-home-o" size="6vw" color="red" />
			</template>
		</van-nav-bar> -->
		<Myheader @right="indexFn" title="个人信息编辑" :show="true"></Myheader>
		<!-- 头像 -->
		<div class="headpic">
			<!-- vant 的上传组件，可以用定位 也可以用插槽 -->
			<!-- <div class="img"><van-image round fit="cover" width="100%" height="100%" :src="userInfo.head_img" /></div> -->
			<van-uploader :after-read="afterRead">
				<div class="img"><van-image round fit="cover" width="100%" height="100%" :src="userInfo.head_img" /></div>
			</van-uploader>
		</div>
		<!-- 单元格 -->
		<!-- @click 点击事件其实可以写多行代码，用分号; 隔开即可 -->
		<Mycell
			title="昵称"
			:desc="userInfo.nickname"
			@click="
				nicknameshow = true;
				nicknameT = userInfo.nickname;
				oldnickname = userInfo.nickname;
			"
		></Mycell>
		<Mycell
			title="密码"
			desc="******"
			@click="
				pwdshow = true;
				oldpwd = '';
				newpwd = '';
			"
		></Mycell>
		<Mycell title="性别" :desc="userInfo.gender ? '男' : '女'" @click="gendershow = true"></Mycell>

		<!-- 所有的弹出框放在页面底部。避免嵌套时出现定位错乱的问题 -->

		<!-- 昵称 -->
		<van-dialog v-model="nicknameshow" title="修改昵称" show-cancel-button @confirm="nicknameFn">
			<van-field required v-model="nicknameT" label="昵称" placeholder="请输入昵称" />
		</van-dialog>

		<!-- 密码 -->
		<van-dialog v-model="pwdshow" title="修改密码" show-cancel-button :before-close="beforeClose">
			<!-- 用before-close  这个@confirm="pwdFn" 不需要了 -->

			<!-- 原密码 -->
			<van-field required v-model="oldpwd" label="原密码" placeholder="请输入原密码" :type="oldpwdType">
				<template #button>
					<van-icon
						name="closed-eye"
						@click="
							oldpwdType = 'text';
							oldpwdKey = !oldpwdKey;
						"
						v-if="oldpwdKey"
					/>
					<van-icon
						name="eye-o"
						v-else
						@click="
							oldpwdType = 'password';
							oldpwdKey = !oldpwdKey;
						"
					/>
				</template>
			</van-field>
			<!-- 新密码 -->
			<van-field required v-model="newpwd" label="新密码" placeholder="请输入新密码" :type="newpwdType">
				<template #button>
					<van-icon
						name="closed-eye"
						@click="
							newpwdType = 'text';
							newpwdKey = !newpwdKey;
						"
						v-if="newpwdKey"
					/>
					<van-icon
						name="eye-o"
						v-else
						@click="
							newpwdType = 'password';
							newpwdKey = !newpwdKey;
						"
					/>
				</template>
			</van-field>
		</van-dialog>

		<!-- ActionSheet 动作面板 -->
		<van-action-sheet v-model="gendershow" :actions="actions" cancel-text="取消" close-on-click-action @select="genderfn" />
	</div>
</template>

<script>
import {userDetailAPI, userCompileAPI} from "@/apis/user";
import {uploadfilesAPI} from "@/apis/index";
import request from "@/utils/request";
import Mycell from "@/components/Mycell.vue";
import Myheader from "@/components/Myheader.vue";
import {prules} from "@/utils/RegExp";

export default {
	components: {
		Mycell,
		Myheader,
	},
	data() {
		return {
			//正则
			pwdrules: prules,
			//数据对象
			userInfo: {},
			// 用户昵称
			nicknameshow: false,
			nicknameT: "",
			oldnickname: "",
			// 用户密码
			pwdshow: false,
			oldpwd: "",
			newpwd: "",
			oldpwdType: "password",
			newpwdType: "password",
			oldpwdKey: true,
			newpwdKey: true,
			//性别
			gendershow: false,
			actions: [
				{name: "男", gender: 1},
				{name: "女", gender: 0},
			],
		};
	},
	async created() {
		// 通过 Vue 调试工具可以更方便找到 id 到底是在那个对象上存储
		const res = await userDetailAPI(this.$route.query.id);
		// 根据 id 获取用户信息
		console.log(res);

		// 加多一层判断 没拿到数据不执行
		if (res.data.data) {
			res.data.data.head_img = request.defaults.baseURL + res.data.data.head_img;
			// 拼接一下路径
			// 获取用户头像是相对路径，需要拼接请求基地址
			// 拼接后赋值给自己
			this.userInfo = res.data.data;
			// 把处理后的数据绑定到 data 中，再用于页面展示
		}
	},
	methods: {
		// file 就是选择的文件对象
		async afterRead(file) {
			// 此时可以自行将文件上传至服务器
			// console.log(file);
			// 上传时需要传一个FormData对象
			const fd = new FormData();
			fd.append("file", file.file);
			// 传进入的参数是一个 FormData 对象
			const res = await uploadfilesAPI(fd);
			// console.log(res);
			// 判断文件是否真的上传成功
			if (res.data.message === "文件上传成功") {
				// console.log(1);
				// 把新的图片地址，更新到用户信息中
				const res2 = await userCompileAPI(this.$route.query.id, {head_img: res.data.data.url});
				// console.log(res2);
				// 更新头像的展示
				this.userInfo.head_img = request.defaults.baseURL + res2.data.data.head_img;
				this.$toast.success("头像更新成功");
			}
		},
		async nicknameFn() {
			// 获取输入框的用户昵称
			if (this.nicknameT === "") return this.$notify("不能为空");
			if (this.nicknameT === this.oldnickname) return;

			// 发送请求更新用户昵称
			const res = await userCompileAPI(this.$route.query.id, {nickname: this.nicknameT});
			// console.log(res);
			this.userInfo.nickname = res.data.data.nickname;
			this.$toast.success("昵称更新成功");
			// console.log(this.nicknameT);
			// console.log(this.oldnickname);
		},
		// async pwdFn() {},
		// 关闭弹出框前自动执行的回调函数，需要在组件上添加 before-close
		async beforeClose(action, done) {
			// console.log(action);
			// console.log(done);
			// 如果点击的是确定按钮
			if (action === "confirm") {
				// if (this.oldpwd !== this.userInfo.password || this.pwdrules.test(this.newpwd) == false) {
				// 	console.log(1);
				// 	this.$toast.fail("不合法");
				// 	done(false);
				// } else {
				// 	done();
				// }

				if (this.oldpwd === this.userInfo.password && this.pwdrules.test(this.newpwd)) {
					console.log(this.pwdrules);
					// 发送请求更新密码
					const res = await userCompileAPI(this.$route.query.id, {password: this.newpwd});
					console.log(res);
					this.userInfo.password = this.newpwd;
					// 修改成功，提示用户
					this.$toast.success("密码修改成功");
					done(); // 🔔 主动关闭弹窗
				} else {
					done(false); // 🔔 阻止弹窗关闭。done(false)
					this.$toast.fail("原密码或错或者新密码不合法");
				}
			} else {
				done(); // 🔔 主动关闭弹窗
			}
		},
		// 编辑性别
		async genderfn(item) {
			const res = await userCompileAPI(this.$route.query.id, {gender: item.gender});
			console.log(res);
			this.$toast.success("性别修改成功"); // 轻提示
			this.userInfo.gender = res.data.data.gender;
			// 不刷新页面，还要同步一下视图的数据
		},
		indexFn() {
			// 页面路由跳转
			this.$router.push({
				name: "index",
				query: {
					id: this.$route.query.id,
				},
			});
		},
	},
};
</script>

<style lang="less" scoped>
.headpic {
	// position: relative;
	height: 200px;
	background-color: #e5e5e5;
	display: flex;
	justify-content: center;
	align-items: center;
	.img {
		width: 100px;
		height: 100px;
		// background-color: aqua;
	}
	// 可以用定位 也可以用插槽
	// .van-uploader {
	// 把 van-uploader 通过定位盖到图片上
	// 	position: absolute;
	// 	// background-color: aquamarine;
	// 	opacity: 0;
	// }
}
</style>
